<template>
  <!-- <div class='container'>
  </div> -->
  <div>
    <el-dialog
  :title="showTitle"
  :visible="showDialog"
  @close="closeDialog"
  :close-on-click-modal="false"
  >
  <el-form
  ref="addForm"
  :model="formData"
  :rules="rules"
  label-width="100px">
    <el-form-item label="学科目录" prop="subjectID">
        <el-select v-model="formData.subjectID" style="width:50%" placeholder="请选择">
          <el-option v-for="item in list" :key="item.id" :value="item.id" :label="item.subjectName" />
        </el-select>
      </el-form-item>
  <el-form-item label="目录名称" prop="directoryName">
    <el-input v-model="formData.directoryName" style="width:50%" placeholder="请输入目录名称" />
  </el-form-item>
  </el-form>
  <template v-slot:footer>
    <el-button @click="closeDialog">取 消</el-button>
    <el-button type="primary" @click="getAdd">确 定</el-button>
  </template>
</el-dialog>
  </div>
</template>

<script>
import { add, list, update } from '../../api/hmmm/directorys'

export default {
  name: 'addDirectorys',
  props: {
    showDialog: {
      type: Boolean,
      default: false
    },
    formData: {
      type: Object
    }
  },
  data () {
    return {

      rules: {
        subjectID: [
          { required: true, message: '学科目录不能为空', trigger: ['blur', 'change'] }
        ],
        directoryName: [
          { required: true, message: '目录名称不能为空', trigger: ['blur', 'change'] }
        ]
      },
      list: []
    }
  },
  computed: {
    showTitle () {
      return this.formData.id ? '修改目录' : '添加目录'
    }

  },
  created () {
    this.getList()
  },
  methods: {
    closeDialog () {
      this.$emit('closeDialogFn', false)
      this.$refs.addForm.resetFields()
    },
    // 添加
    getAdd () {
      this.$refs.addForm.validate(async (flag) => {
        if (!flag) return
        if (this.formData.id) {
          await update(this.formData)
          this.$emit('updata')
          this.$message.success('恭喜修改成功！')
        } else {
          await add(this.formData)
          this.$message.success('恭喜添加成功！')
        }

        this.closeDialog()
        this.$parent.listApi(this.data)
      })
      // const { data } = await add(this.formData)
      // console.log(data)
    },
    // 修改
    async updateDialog (id) {
      this.showDialog = true
      const { data } = await update(id)
      this.formInline = data
    },
    async getList () {
      const { data: { items } } = await list()
      this.list = items
    }
  }

}
</script>

<style scoped lang='scss'></style>
